---
import BaseLayout from "../layouts/BaseLayout.astro";

// 作品集数据
const portsItems = [
  {
    id: "1",
    title: "Web Development Portfolio",
    date: "Mar 06, 2025",
    href: "/ports/web-development",
  },
  {
    id: "2",
    title: "Mobile App Design",
    date: "Feb 03, 2025",
    href: "/ports/mobile-app-design",
  },
  {
    id: "3",
    title: "UI/UX Design Projects",
    date: "Nov 19, 2024",
    href: "/ports/ui-ux-design",
  },
];
---

<BaseLayout
  title="KIYOMIZU-DERA TEMPLE"
  description="Enjoy the stunning up-to-date information of Kiyomizu-dera Temple."
  pageClass="page-home"
>
  <div id="main">
    <section id="main_yt" class="main_yt_top mv">
      <div class="intro_pc">
        <div class="ttl clearfix">
          <div class="img">
            <img
              src="/img/top/movie_ttl2.png"
              alt="A WIDELY WORSHIPED HOLY PLACE"
              width="680"
              height="372"
              decoding="async"
            />
            <span class="line l1"></span>
            <span class="line l2"></span>
            <span class="line l3"></span>
          </div>
        </div>
        <p>
          The eleven faces and forty-two arms of <br />
          Kannon show great compassion. <br />
          People have felt very close to the principal <br />
          image of the temple and <br />
          called the deity "Kiyomizu Kannon-san."
        </p>
      </div>
      <a href="javascript:void(0);" class="scrollarr">
        <span>
          <img
            class="scrollarr_w"
            src="/img/common/icon/scroll_arr.svg"
            alt=""
            width="38"
            height="24"
            decoding="async"
          />
          <img
            class="scrollarr_b"
            src="/img/common/icon/scroll_arr_b.svg"
            alt=""
            width="38"
            height="24"
            decoding="async"
          />
        </span>
      </a>
      <div id="slide">
        <div class="slide_wrap">
          <ul class="pic">
            <li>
              <a href="#">
                <div class="cover"></div>
                <picture>
                  <source
                    media="(min-width: 979px)"
                    type="image/webp"
                    srcset="/img/top/top_mv_pc_01.webp"
                    width="2600"
                    height="1528"
                  />
                  <source
                    media="(min-width: 979px)"
                    srcset="/img/top/top_mv_pc_01.jpg"
                    width="2600"
                    height="1528"
                  />
                  <source
                    type="image/webp"
                    srcset="/img/top/top_mv_sp_01.webp"
                    width="750"
                    height="1228"
                  />
                  <img
                    class="main_img"
                    src="/img/top/top_mv_sp_01.jpg"
                    alt=""
                    width="750"
                    height="1228"
                    decording="async"
                  />
                </picture>
              </a>
            </li>
            <li>
              <a href="#">
                <div class="cover"></div>
                <picture>
                  <source
                    media="(min-width: 979px)"
                    type="image/webp"
                    srcset="/img/top/top_mv_pc_02.webp"
                    width="2600"
                    height="1528"
                  />
                  <source
                    media="(min-width: 979px)"
                    srcset="/img/top/top_mv_pc_02.jpg"
                    width="2600"
                    height="1528"
                  />
                  <source
                    type="image/webp"
                    srcset="/img/top/top_mv_sp_02.webp"
                    width="750"
                    height="1228"
                  />
                  <img
                    class="main_img"
                    src="/img/top/top_mv_sp_02.jpg"
                    alt=""
                    width="750"
                    height="1228"
                    decording="async"
                  />
                </picture>
              </a>
            </li>
            <li>
              <a href="#">
                <div class="cover"></div>
                <picture>
                  <source
                    media="(min-width: 979px)"
                    type="image/webp"
                    srcset="/img/top/top_mv_pc_03.webp"
                    width="2600"
                    height="1528"
                  />
                  <source
                    media="(min-width: 979px)"
                    srcset="/img/top/top_mv_pc_03.jpg"
                    width="2600"
                    height="1528"
                  />
                  <source
                    type="image/webp"
                    srcset="/img/top/top_mv_sp_03.webp"
                    width="750"
                    height="1228"
                  />
                  <img
                    class="main_img"
                    src="/img/top/top_mv_sp_03.jpg"
                    alt=""
                    width="750"
                    height="1228"
                    decording="async"
                  />
                </picture>
              </a>
            </li>
            <li>
              <a href="#">
                <div class="cover"></div>
                <picture>
                  <source
                    media="(min-width: 979px)"
                    type="image/webp"
                    srcset="/img/top/top_mv_pc_04.webp"
                    width="2600"
                    height="1528"
                  />
                  <source
                    media="(min-width: 979px)"
                    srcset="/img/top/top_mv_pc_04.jpg"
                    width="2600"
                    height="1528"
                  />
                  <source
                    type="image/webp"
                    srcset="/img/top/top_mv_sp_04.webp"
                    width="750"
                    height="1228"
                  />
                  <img
                    class="main_img"
                    src="/img/top/top_mv_sp_04.jpg"
                    alt=""
                    width="750"
                    height="1228"
                    decording="async"
                  />
                </picture>
              </a>
            </li>
            <li>
              <a href="#">
                <div class="cover"></div>
                <picture>
                  <source
                    media="(min-width: 979px)"
                    type="image/webp"
                    srcset="/img/top/top_mv_pc_05.webp"
                    width="2600"
                    height="1528"
                  />
                  <source
                    media="(min-width: 979px)"
                    srcset="/img/top/top_mv_pc_05.jpg"
                    width="2600"
                    height="1528"
                  />
                  <source
                    type="image/webp"
                    srcset="/img/top/top_mv_sp_05.webp"
                    width="750"
                    height="1228"
                  />
                  <img
                    class="main_img"
                    src="/img/top/top_mv_sp_05.jpg"
                    alt=""
                    width="750"
                    height="1228"
                    decording="async"
                  />
                </picture>
              </a>
            </li>
            <li>
              <a href="#">
                <div class="cover"></div>
                <picture>
                  <source
                    media="(min-width: 979px)"
                    type="image/webp"
                    srcset="/img/top/top_mv_pc_06.webp"
                    width="2600"
                    height="1528"
                  />
                  <source
                    media="(min-width: 979px)"
                    srcset="/img/top/top_mv_pc_06.jpg"
                    width="2600"
                    height="1528"
                  />
                  <source
                    type="image/webp"
                    srcset="/img/top/top_mv_sp_06.webp"
                    width="750"
                    height="1228"
                  />
                  <img
                    class="main_img"
                    src="/img/top/top_mv_sp_06.jpg"
                    alt=""
                    width="750"
                    height="1228"
                    decording="async"
                  />
                </picture>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </section>

    <section id="Ports">
      <div class="section_wrap">
        <h2>
          <span style="letter-spacing: 0.08em;">P</span><span
            style="letter-spacing: 0.08em;">O</span
          ><span style="letter-spacing: 0.05em;">R</span><span
            style="letter-spacing: 0.05em;">T</span
          >S
        </h2>
        <div class="list">
          <ul>
            {
              portsItems.map((item) => (
                <li>
                  <a href={item.href} class="news_list_a">
                    <dl>
                      <dt>{item.date}</dt>
                      <dd>
                        {item.title}
                        <span class="common_arr">
                          <img
                            src="/img/common/icon/arr-head.svg"
                            alt=""
                            width="14"
                            height="14"
                            decoding="async"
                          />
                        </span>
                      </dd>
                    </dl>
                  </a>
                </li>
              ))
            }
          </ul>
          <p class="news_list_link"><a href="/ports">SEE MORE</a></p>
        </div>
      </div>
    </section>
    <section id="Head">
      <div class="section_wrap">
        <h2 class="lead show_pc">WELCOME TO MY PORTFOLIO</h2>
        <h2 class="lead show_tbsp">
          WELCOME TO<br />
          MY PORTFOLIO
        </h2>
        <p class="txt">
          Explore my creative works and professional projects.<br />
          From web development to design, discover the passion and dedication<br
          />
          that drives my creative journey.<br class="sptbbr" />
          <br class="sptbbr" />
          Each project represents a unique challenge and solution,<br />
          crafted with attention to detail and user experience.<br
            class="sptbbr"
          />
          <br class="sptbbr" />
        </p>
      </div>
    </section>

    <section id="Bnr">
      <div class="section_wrap">
        <a href="https://feel.kiyomizudera.or.jp/" target="_blank">
          <div class="bnr_wrap_pc">
            <div class="base">
              <div class="inbase"></div>
            </div>
            <dl>
              <dt>
                <picture>
                  <source type="image/webp" srcset="/img/top/bnr_pc.webp" />
                  <img
                    src="/img/top/bnr_pc.jpg"
                    alt=""
                    width="388"
                    height="258"
                    loading="lazy"
                  />
                </picture>
              </dt>
              <dd>
                <div class="tit">
                  <img
                    src="/img/common/icon/feel_b.svg"
                    alt="FEEL_KIYOMIZUDERA"
                    width="296"
                    height="16"
                    loading="lazy"
                  />
                </div>
                <p class="txt">
                  The project presents a new perspective and a fresh
                  interpretation of <br />prayer through a variety of
                  experimental expressions beyond convention.
                </p>
              </dd>
            </dl>
          </div>
          <div class="sp_bnr_box">
            <div class="bnr_wrap_sp">
              <picture>
                <source
                  type="image/webp"
                  media="(max-width: 500px)"
                  srcset="/img/top/bnr_sp.webp"
                  width="504"
                  height="140"
                />
                <source
                  media="(max-width: 500px)"
                  srcset="/img/top/bnr_sp.png"
                  width="504"
                  height="140"
                />
                <source
                  type="image/webp"
                  srcset="/img/top/bnr_tb.webp"
                  width="804"
                  height="146"
                />
                <img
                  src="/img/top/bnr_tb.png"
                  alt="FEEL_KIYOMIZUDERA"
                  width="804"
                  height="146"
                  loading="lazy"
                />
              </picture>
              <p>
                <img
                  src="/img/common/icon/feel_w.svg"
                  alt="FEEL_KIYOMIZUDERA"
                  width="296"
                  height="16"
                  loading="lazy"
                />
              </p>
            </div>
          </div>
        </a>
      </div>
    </section>
  </div>
</BaseLayout>
